<template>
	<view class="page flex-col">
		<view class="box_3 flex-col" v-if="constants.length == 0">
			<view class="box_4 flex-col">
				<view class="block_2 flex-col"></view>
				<view class="block_3 flex-row">
					<view class="image-wrapper_1 flex-col justify-between">
						<image class="thumbnail_3" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG702713d6adc8836879ff046f484ee645.png" />
						<image class="thumbnail_4" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG38f76132730089c26b0b59f50704c104.png" />
					</view>
					<view class="block_4 flex-col">
						<view class="block_5 flex-col"></view>
					</view>
					<view class="block_6 flex-col justify-between">
						<image class="thumbnail_5" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG8af87b9932779d2cf6525faef7886415.png" />
						<view class="box_5 flex-col"></view>
					</view>
				</view>
				<image class="image_2" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG5b6fcf1b3b6f1db7a74053b70e584562.png" />
			</view>
			<text class="text_2">暂无我的房子</text>
			<view class="box_6 flex-col"></view>
			<view class="box_7 flex-col">
				<view class="block_7 flex-col"></view>
				<view class="block_8 flex-col"></view>
			</view>
		</view>
		<view class="pag" v-else> 
			<view class="center-box" v-for="(item,i) in constants" :key="i">
				<view class="title">{{item.address}}</view>
				<view class="zh">
					<view>{{item.area}}</view>
					<view @tap="blod(item)">
						<image src="https://img.aibbyp.com/wechat/newImg/my/open.png" mode=""></image>
					</view>
				</view>
				<view class="phone">
					<text style="margin-right:40px;">{{item.name}}</text>
					<text>158****3608</text>
				</view>
			</view>
		</view>
		
		<view class="text-wrapper_1" @tap="$wanlshop.to('/pages/user/record/myrecord')">
			新增我的房子
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				constants: [],
			};
		},
		onLoad() {
			this.houseList()
			uni.$on('updataList',(data)=>{
			this.houseList()
			})
		},
		methods: {
			houseList(){
				this.$api.get({
					url:'/jmy/user_house/list',
					success: res => {
						console.log(res,'--l')
						this.constants = res.data;
					}
				})
			},
			blod(item){
				console.log(item)
				uni.navigateTo({
					url:`/pages/user/record/myrecord?data=${JSON.stringify(item)}` 
				})
			}
			
		},
	};
</script>
<style>
	.pag{
		height: 89vh;
		overflow: auto;
	}
	.phone{
		margin-top: 10px;
		font-family: Source Han Sans;
		font-size: 13px;
		letter-spacing: 0em;
		color: #666666;
		
		z-index: 0;
	}
	.zh image{
		width: 14px;
		height: 14px;
	}
	.zh{
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-family: Source Han Sans;
		font-size: 15px;
		font-weight: 500;
		margin-top: 5px;
		font-feature-settings: "kern" on;
		color: #333333;
		z-index: 1;
	}
	.title{
		font-family: Source Han Sans;
		font-size: 11px;
		font-feature-settings: "kern" on;
		color: #999999;
	}
	.center-box{
		width: 90%;
		height: 109px;
		margin: 0 auto;
		border-bottom: 1px solid #F5F5F5;
		padding: 20px 15px;
	}
	.flex-col {
	  display: flex;
	  flex-direction: column;
	}
	.flex-row {
	  display: flex;
	  flex-direction: row;
	}
	.justify-start {
	  display: flex;
	  justify-content: flex-start;
	}
	.justify-center {
	  display: flex;
	  justify-content: center;
	}
	
	.justify-end {
	  display: flex;
	  justify-content: flex-end;
	}
	.justify-evenly {
	  display: flex;
	  justify-content: space-evenly;
	}
	.justify-around {
	  display: flex;
	  justify-content: space-around;
	}
	.justify-between {
	  display: flex;
	  justify-content: space-between;
	}
	.align-start {
	  display: flex;
	  align-items: flex-start;
	}
	.align-center {
	  display: flex;
	  align-items: center;
	}
	.align-end {
	  display: flex;
	  align-items: flex-end;
	}

	.page {
	  background-color: #FFF;
	  position: relative;
	  width: 100vw;
	  height: 95vh;
	  
	  overflow: hidden;
	}
	
	.box_1 {
	  width: 100vw;
	  height: 12.31vw;
	}
	
	.image_1 {
	  width: 8.47vw;
	  height: 3.85vw;
	  margin: 3.84vw 0 0 8.2vw;
	}
	
	.thumbnail_1 {
	  width: 5.13vw;
	  height: 3.59vw;
	  margin: 4.1vw 0 0 62.05vw;
	}
	
	.thumbnail_2 {
	  width: 4.11vw;
	  height: 3.59vw;
	  margin: 4.1vw 0 0 1.02vw;
	}
	
	.block_1 {
	  height: 3.08vw;
	  background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a2a201161e6f41128aa55c96b58143e4_mergeImage.png)
	    100% no-repeat;
	  background-size: 100% 100%;
	  width: 6.42vw;
	  margin: 4.35vw 3.58vw 0 1.02vw;
	}
	
	.group_1 {
	  background-color: rgba(0, 0, 0, 1);
	  border-radius: 1px;
	  width: 4.88vw;
	  height: 2.06vw;
	  margin: 0.51vw 0 0 0.51vw;
	}
	
	.box_2 {
	  position: relative;
	  width: 100vw;
	  height: 11.54vw;
	  margin-bottom: 192.57vw;
	}
	
	.group_2 {
	  width: 55.9vw;
	  height: 6.42vw;
	  margin: 2.56vw 0 0 2.82vw;
	}
	
	.label_1 {
	  width: 6.67vw;
	  height: 6.16vw;
	}
	
	.text_1 {
	  width: 17.44vw;
	  height: 6.42vw;
	  overflow-wrap: break-word;
	  color: rgba(18, 18, 18, 1);
	  font-size: 4.35vw;
	  font-family: Source Han Sans-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 6.42vw;
	}
	
	.group_3 {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100vw;
	  height: 11.29vw;
	}
	
	.box_3 {
	  background-color: rgba(255, 255, 255, 1);
	  position: absolute;
	  left: 0;
	  width: 100vw;
	}
	
	.box_4 {
	  background-color: rgba(255, 247, 238, 1);
	  border-radius: 50%;
	  width: 65.9vw;
	  height: 65.9vw;
	  margin: 18.71vw 0 0 17.17vw;
	}
	
	.block_2 {
	  background-color: rgba(255, 255, 255, 1);
	  border-radius: 50%;
	  width: 2.31vw;
	  height: 2.31vw;
	  border: 1.095170497894287px solid rgba(62, 73, 79, 1);
	  margin: 15.12vw 0 0 17.94vw;
	}
	
	.block_3 {
	  width: 42.57vw;
	  height: 30.26vw;
	  margin: 0.25vw 0 0 13.07vw;
	}
	
	.image-wrapper_1 {
	  width: 5.65vw;
	  height: 12.06vw;
	  margin-top: 17.44vw;
	}
	
	.thumbnail_3 {
	  width: 3.85vw;
	  height: 3.85vw;
	}
	
	.thumbnail_4 {
	  width: 5.13vw;
	  height: 4.36vw;
	  margin: 3.84vw 0 0 0.51vw;
	}
	
	.block_4 {
	  height: 30.26vw;
	  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG633a6eaff5fb4031282faf52039b2d60.png)
	    100% no-repeat;
	  background-size: 100% 100%;
	  margin-left: 1.29vw;
	  width: 30.26vw;
	}
	
	.block_5 {
	  background-color: rgba(255, 255, 255, 0);
	  border-radius: 50%;
	  width: 1.54vw;
	  height: 1.54vw;
	  border: 1.095170497894287px solid rgba(62, 73, 79, 1);
	  margin: 8.46vw 0 0 0.25vw;
	}
	
	.block_6 {
	  width: 3.59vw;
	  height: 19.75vw;
	  margin: 3.58vw 0 0 1.79vw;
	}
	
	.thumbnail_5 {
	  width: 2.83vw;
	  height: 2.83vw;
	}
	
	.box_5 {
	  background-color: rgba(255, 255, 255, 1);
	  border-radius: 50%;
	  width: 2.06vw;
	  height: 2.06vw;
	  border: 1.095170497894287px solid rgba(62, 73, 79, 1);
	  margin: 14.87vw 0 0 1.53vw;
	}
	
	.image_2 {
	  width: 43.85vw;
	  height: 1.8vw;
	  margin: 0 0 16.15vw 11.28vw;
	}
	
	.text_2 {
	  width: 21.54vw;
	  height: 5.13vw;
	  overflow-wrap: break-word;
	  color: rgba(128, 128, 128, 1);
	  font-size: 3.58vw;
	  font-family: Source Han Sans-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 5.13vw;
	  margin: 4.1vw 0 0 39.48vw;
	}
	
	.text-wrapper_1 {
	  width: 358px;
	  height: 42px;
	  border-radius: 4px;
	  opacity: 1;
	  /* 自动布局 */
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  padding: 10px;
	  gap: 10px;
	  color: #FFF;
	  background: linear-gradient(108deg, #FFA64C 16%, #FD9328 51%, #FD8913 80%);
	  box-shadow: 0px 4px 10px 0px rgba(254, 137, 19, 0.3);
	      position: fixed;
	      bottom: 8px;
	      left: 7vw;
	}
	
	.text_3 {
	  width: 27.7vw;
	  height: 7.18vw;
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 4.61vw;
	  font-family: Source Han Sans-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 7.18vw;
	  margin: 2.56vw 0 0 18.71vw;
	}
	
	.box_6 {
	  position: absolute;
	  left: 0;
	  top: -23.58vw;
	  width: 4.11vw;
	  height: 216.42vw;
	}
	
	.box_7 {
	  position: absolute;
	  left: 95.9vw;
	  top: -23.33vw;
	  width: 4.11vw;
	  height: 216.42vw;
	}
	
	.block_7 {
	  width: 2.57vw;
	  height: 2.57vw;
	  margin: 45.64vw 0 0 0.25vw;
	}
	
	.block_8 {
	  width: 2.57vw;
	  height: 2.57vw;
	  margin: 13.33vw 0 152.3vw 0.25vw;
	}
	
	.box_8 {
	  background-color: rgba(250, 250, 250, 1);
	  height: 21.29vw;
	  width: 100vw;
	  position: absolute;
	  left: 0;
	  top: 171.54vw;
	}
	
	.text-wrapper_2 {
	  width: 8.21vw;
	  height: 5.9vw;
	  margin: 3.84vw 0 0 71.02vw;
	}
	
	.text_4 {
	  width: 8.21vw;
	  height: 5.9vw;
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 4.1vw;
	  font-family: Source Han Sans-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 5.9vw;
	}
	
	.box_9 {
	  width: 35.9vw;
	  height: 1.29vw;
	  margin: 8.2vw 0 2.05vw 32.05vw;
	}
	
	.group_4 {
	  background-color: rgba(0, 0, 0, 1);
	  border-radius: 25px;
	  width: 35.9vw;
	  height: 1.29vw;
	}

</style>